<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Kimi.ai - 帮你看更大的世界</title>
    <style>

        .container{
            width: 100%;
            height: 100%;
            background-color: whitesmoke;
            background-size: cover;
        }
        .img{
            width: 20rem;
            display: flex;
            top: 100px;
			position: relative;
            margin:0 auto;
            text-align: center;
        }
        .img_box{
            width: 20rem;
            display: flex;
			position: relative;
            margin:0 auto;
            text-align: center;
            background-color: whitesmoke;
        }
        .lest_line{
            padding: 5px 12px 8px 16px;
            background-color:white;
            top: 150px;
            width: 800px;
            height: 100px;
            border: 0 solid ;
			position: relative;
            margin:0 auto;
            text-align: center;
            overflow: hidden;
            border-radius: 16px;
            transition: all ;
            box-shadow: none;

        }
        .help{

            background-color: white;;
            width: auto;
            height: 30px;
			position: relative;
            margin:0 auto;
            text-align: center;
            overflow: hidden;
            border-radius: 8px;
            transition: all ;
            box-shadow: none;
            float: left;
        }
        .help_box1{
            padding: 5px 12px 8px 16px;
            /*background-color:white;*/
            top: 170px;
            width: 510px;
            height: 40px;
            border: 0 solid ;
			position: relative;
            margin:0 auto;
            text-align: center;
            overflow: hidden;
            border-radius: 16px;
            transition: all ;
            box-shadow: none;
        }
        .help_box2{
            padding: 5px 12px 8px 16px;
            /*background-color:white;*/
            top: 170px;
            width: 700px;
            height: 40px;
            border: 0 solid ;
			position: relative;
            margin:0 auto;
            text-align: center;
            overflow: hidden;
            border-radius: 16px;
            transition: all ;
            box-shadow: none;
        }
        .emoji_box{
            float: left;
        }
        .te_box{
            float: right;
            margin:4px 4px 4px 4px;
        }
        .grey_box{
            float: left;
            width: auto;
            height: auto;
            background-color: whitesmoke;
            margin:4px 4px 4px 4px;
        }
        .textbox{
            flex-grow: 1;
            max-height: 160px;
            color: black;
            padding-right: 16px;
            margin-right: -12px;
            min-height: 60px;
        }
        .text{
            width:400px;
            height: 40px;
            border: 1px;
            /*清除掉默认的padding*/
            padding:0px;

            /*提示字首行缩进*/
            text-indent: 10px;

            /*去掉蓝色高亮框*/
            outline: none;

            /*用浮动解决内联元素错位及小间距的问题*/
            float:left;

        }
        .search_line{
            border-radius: 8px;
            color: white;
            background-color: blue;
            height: 36px;
            width: 36px;
            float:right;
            cursor: pointer;
        }
        .left_line{
            position: fixed;
            width: 40px;
            height: 200px;
            top: 200px;
            background-color: white;
        }
         .block{
            position: relative;
            width: 30px;
            height: 20px;

            background-color: white;
        }
        .home{
            width: 32px;
            height: 32px;
            background: url() no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            position: relative;
            margin:0 auto;
            text-align: center;
        }
        .LINE{
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            cursor: pointer;
            position: relative;
            margin:0 auto;
            text-align: center;
        }
        .layer {
            width: 100px;
            background: black;
            position: absolute;
            left: 100%;
            top: 0;
            transform:translateY(-0%);
            display: none;
            padding: 0 15px;
            border-radius: 6px;
        }
        .layer1 {
            width: 100px;
            height: 100px;
            animation: show___PuZhP .3s ease 1;
            position: absolute;
            left: 100%;
            top: 0;
            transform:translateY(-0%);
            display: none;
            padding: 0 15px;
            border-radius: 6px;
        }
        .LINE:hover {
                .layer {
                    display: block;
                }
            }
        .LINE:hover {
                .layer1 {
                    display: block;
                }
            }
        .home:hover {
                .layer {
                    display: block;
                }
            }
        .search_line:hover {
                .layer {
                    display: block;
                }
            }
        h4 {
            color: white; /* 使用十六进制颜色值 */
        }
        p{
            position: relative;
            top: 0;
        }
    </style>



</head>
<body class="container">
    <div class="container">
        <div class="img_box">
        <a href="https://kimi.moonshot.cn/chat/%7Ccr1db96gi3pumpottd00?index=0&tu=1">
            <img src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimi/doodle/cr1egt6gi3pumpotvfbg/%E7%99%BD%E8%89%B2%20(1).png"  class="img">
        </a>
        </div>
        <div class="lest_line">
            <a href="https://www.moonshot.cn/back-to-school"></a>
            <div class="textbox">
                <input type="text" class="text" placeholder="尽管问..."><!-- -->


            </div>
            <div class="search_line">
            <button class="search_line" tabindex="-1" type="button" data-testid="msh-chatinput-send-button" id="send-button" disabled="">
            </button>
                <div class="layer"><h4>请输入你的问题</h4></div>
            </div>



        </div>
        <div class="left_line">
            <a href="https://kimi.moonshot.cn/">
            <div data-testid="msh-sidebar-main" class="home">
                <div class="layer"><h4>回到首页</h4></div>
            </div>
            </a>

            <div class="block"></div>

            <div class="LINE">
                <img src="" alt="">
                <div class="layer1"><img src="" width="100" height="100" alt="">
                <p>扫码下载<br>Kimi 智能助手</p>
                </div>
            </div>

            <div class="block"></div>

            <div class="LINE">
                <a href="https://kimi.moonshot.cn/extension/download">
                <img src="" alt="extension">
                </a>
                <div class="layer"><h4>下载kimi浏览器助手</h4></div>

            </div>
        </div>

        <div class="help_box1">
            <div class="help">
                 <a href="https://www.moonshot.cn/back-to-school">
                <img src="" height="30" width="30" class="emoji_box">
                 <span class="te_box">Kimi陪你勇闯新学期</span>
                 </a>
            </div>

             <div class="help">
                 <a href="https://kimi.moonshot.cn/chat/%7Ccrhu3p2esepucpdt39c0?index=0&tu=1">
                     <span class="grey_box">👴🏻</span>
                     <span class="te_box">1分钟看懂“渐进式延迟法定退休年龄”</span>
                 </a>
            </div>



        </div>

        <div class="help_box2">
            <div class="help">
                <a href="https://kimi.moonshot.cn/chat/%7Ccrhqsjqesepucpdrm9c0?index=0&tu=1">
                     <span class="grey_box">🛸</span>
                     <span class="te_box">SpaceX 人类首次商业太空行走</span>
                 </a>
            </div>
            <div class="help">
                <a href="https://kimi.moonshot.cn/chat/%7Ccrhqvsiesepucpdrnoag?index=0&tu=1">
                     <span class="grey_box">💸</span>
                     <span class="te_box">金价又创新高？！</span>
                 </a>
            </div>
            <div class="help">
                <a href="https://kimi.moonshot.cn/chat/%7Ccrhqreaesepucpdrlo50?index=0&tu=1">
                     <span class="grey_box">🌀</span>
                     <span class="te_box">贝碧嘉或成中秋最强台风</span>
                 </a>
            </div>
        </div>


        </div>

<script>
    function reset()
    {
        document.documentElement.style.fontSize = screen.width/10
    }
    window.onresize = reset

</script>
</body>
</html>

